import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet,
} from 'react-native';

import {
    Tip,
    Loading,
    Press
} from './../../../components';

import {
    Actions
} from 'react-native-router-flux';

import fetchBlob from 'rn-fetch-blob';

const  dirs = fetchBlob.fs.dirs;

import {
    fileName
} from './../../../utils/suffix';

import block_icon from './../../../images/home/block.png';
import report_icon from './../../../images/home/report.png';
import download_icon from './../../../images/download.png';


import connect from './../../../utils/connect';
import * as commonTypes from './../../../state/types/common';
import commonAction from './../../../state/actions/common';

interface Props {
    url:string,
    userId: number,
    videoId:number,
    onPageOut:Function,
    commonActions:any,
    onBlocked:Function,
    onDialogClose:Function
}

@connect({
    commonActions: commonAction
})
class More extends PureComponent<Props, any> {

    static defaultProps = {
        url:``,
        userId: 0,
        videoId:0,
        commonActions:{},
        onBlocked:() => null,
        onPageOut:() => null,
        onDialogClose:() => null
    }

    //屏蔽用户
    private onBlock = async () => {
        const {
            userId,
            onBlocked,
            commonActions
        } = this.props;

        Loading.show();

        try {
            await commonActions[
                commonTypes.blockUser
            ](userId);

            onBlocked();

            this.onClose();

            Tip.success({
                message: `You blocked this user successfully!`
            })
        }
        catch (e) {
            Tip.warm({
                message: e.message
            })
        }

        Loading.close()
    }


    //举报
    private onReport = () => {
        const {
            videoId,
            userId,
            onPageOut
        } = this.props;

        const _para = {
            videoId:videoId,
            userId:userId,
            backUrl:Actions.currentScene
        }

        onPageOut();
        this.onClose();

        Actions.jump(`/report`,_para)
    }

    private onClose = () => {
        const {
            onDialogClose
        } = this.props;
        onDialogClose();
    }

    private onDownload = async () => {
        const {
            url
        } = this.props;
        const config = {
            path : dirs.DownloadDir + `/${fileName(url)}`
        }
        fetchBlob.config(config).
        fetch('GET', url).
        then((res) => (
            Tip.success({
                message:`The Video saved to ${res.path()}`
            })
        ))
        this.onClose();
    }

    render() {
        const {
            videoId
        } = this.props;

        return (
            <View style={styles.container}>
                {!videoId && (
                    <Press
                        onPress={this.onBlock}
                        style={styles.button}
                    >
                        <Image source={block_icon}/>
                        <Text style={styles.buttonText}>
                            Block
                        </Text>
                    </Press>
                )}
                <Press
                    style={styles.button}
                    onPress={this.onReport}
                >
                    <Image source={report_icon}/>
                    <Text style={styles.buttonText}>
                        Report
                    </Text>
                </Press>
                {!!videoId && (
                    <Press
                        style={styles.button}
                        onPress={this.onDownload}
                    >
                        <Image source={download_icon}/>
                        <Text style={styles.buttonText}>
                            Save to Local Album
                        </Text>
                    </Press>
                )}
                <Press
                    style={styles.cancel}
                    onPress={this.onClose}
                >
                    <Text style={styles.cancelText}>
                        Cancel
                    </Text>
                </Press>
            </View>
        )
    }
}


export default More;


const styles = StyleSheet.create({
    container: {
        overflow:`hidden`,
        backgroundColor:`#EDEDED`
    },
    button:{
        height:56,
        marginBottom:1,
        alignItems:`center`,
        flexDirection:`row`,
        backgroundColor:`#fff`,
        justifyContent:`center`
    },
    cancel:{
        height:52,
        alignItems:`center`,
        flexDirection:`row`,
        justifyContent:`center`,
        backgroundColor:`#fff`
    },
    buttonText:{
        fontSize:14,
        marginLeft:6,
        fontWeight:`700`,
        color:`#1E1E24`
    },
    cancelText:{
        fontSize:15,
        color:`#333`
    }
}) as any;